<template>
  <div class="container">
    <div>
      <div>
        <span 
          @click="$router.back(-1)"
          class="back"
          >{{$t('page.back')}}{{$t('page.list')}}
        </span> > {{$route.query.name}}（{{$route.query.time}}）
      </div>
    </div>
    <div class="container-body">
      <el-tabs @tab-click="handleClick" type="border-card" v-model="activeName">
        <el-tab-pane v-for="item in tabList" :key="item.uuid" :name="item.uuid">
          <div class="tab_color" slot="label">
            <i class="color_piece" :style="{background: item.color || 'pink'}"></i>
            <span class="text_piece"> {{ item.label || item.fileName }}</span>
          </div>
          <Detail
            v-if="item.uuid === activeName"
            v-loading.fullscreen.lock="pageLoading" 
            :ItemData="itemData"
            :uuidC="item.uuid"
            :isDetailPage="true"
          ></Detail>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { fetchHistoryDetail, fetchHistoryUuid } from '@/api/table'
import Detail from '../components/detail.vue'

export default {
  data() {
    return {
      pageLoading: false,
      activeName: '',
      tabList: [],
      itemData: {},
    }
  },
  components: {
    Detail
  },
  mounted() {
    this.getHistoryDetail()
  },
  methods: {
    handleClick(tab, event) {
      this.getItemData(this.activeName)
    },
    async getHistoryDetail() {
      try {
        const res = await fetchHistoryDetail({
          id: this.$route.query.id,
        })
        const data = JSON.parse(res.data[0].resultData)
        // console.log(data);
        const r = Array.isArray(data) ? data : [data]
        this.tabList = r

        this.activeName = r[0].uuid
        this.getItemData(r[0].uuid)
      } catch {
        return
      }
    },
    // 获取结果页页面信息
    async getItemData(uuid) {
      this.pageLoading = true
      try {
        const res = await fetchHistoryUuid(uuid)
        const data = JSON.parse(res.data[0].resultData.replace(/\n/g,"").replace(/\r/g,"")) || {}
        // console.log(data, '123');
        const obj = {
          originalData: data.originalData,
          imgUrl: data.avg5_map['imgPath'],
          paramResult: data.result_data_excel,
          histogramList: data.avg5,
          lineData: data.originalData[0],
          hole: data.hole,
          fittingData: data.originalData_hl_merge[0],
          concentration: data.computeCrpValue.value,
          mole: data.mole || '',
          uuid: data.uuid,
          dissociation: data.dissociation || 0
        }
        this.itemData = obj
        if(res.status !== 200) {
          return this.$message.error(res.data.msg || "服务器繁忙！请稍后再试")
        }
      } catch(err) {
        return err
      } finally {
        this.pageLoading = false
      }
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color:#409eff;
    border-color: #409eff;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #fff;
  }
  .el-checkbox__input.is-disabled+span.el-checkbox__label {
    color: #409eff;
  }
}

.container {
  padding: 20px;
}
.back {
  color: #028cdf;
  cursor: pointer;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 20px;
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
.tab_color {
  display: flex;
  align-items: center;
  .color_piece {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
  }
  .text_piece {
    display: inline-block;
    width: 100px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>